<template>
  <basicModal ref="basicModalRef" @register="register" style="width: 780px" @on-ok="onOk">
    <n-spin :show="loading">
      <n-form
        :label-width="130"
        :model="formItem"
        :rules="rules"
        label-placement="left"
        ref="formRef"
        class="mt-6"
      >
        <n-grid x-gap="12" :cols="2">
          <n-gi>
            <n-form-item label="客户名称" path="name">
              <n-input
                v-model:value="formItem.name"
                style="width: 360px"
                placeholder="请输入客户名称"
              ></n-input>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="负责人" path="charge">
              <n-input
                v-model:value="formItem.charge"
                style="width: 360px"
                placeholder="请输入负责人"
              ></n-input>
            </n-form-item>
          </n-gi>
          <n-gi v-if="!formItem.id">
            <n-form-item label="登录账号" path="account">
              <n-input
                v-model:value="formItem.account"
                style="width: 360px"
                placeholder="请输入登录账号"
              ></n-input>
            </n-form-item>
          </n-gi>
          <n-gi v-if="!formItem.id">
            <n-form-item label="登录密码" path="password">
              <n-input
                v-model:value="formItem.password"
                type="password"
                show-password-on="mousedown"
                style="width: 360px"
                placeholder="请输入登录账号"
              ></n-input>
            </n-form-item>
          </n-gi>
          <n-gi v-if="!formItem.id">
            <n-form-item label="所属代理" path="site_id">
              <n-select
                style="width: 360px"
                v-model:value="formItem.site_id"
                label-field="name"
                value-field="id"
                :options="siteList"
              />
            </n-form-item>
          </n-gi>
          <n-gi v-if="!formItem.id">
            <n-form-item label="类型" path="type">
              <n-radio-group v-model:value="formItem.type">
                <n-space>
                  <n-radio value="formal"> 正式 </n-radio>
                  <n-radio value="test"> 测试 </n-radio>
                </n-space>
              </n-radio-group>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="状态" path="status">
              <n-switch checked-value="t" unchecked-value="f" v-model:value="formItem.status" />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-spin>
  </basicModal>
</template>

<script setup lang="ts">
import { basicModal, useModal } from '@/components/Modal';
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
// import {
//   siteCustomerAdd,
//   siteCustomerInfo,
//   siteCustomerUpdate,
//   siteSelect,
// } from '@/api/admin';
import { cloneDeep } from 'lodash-es';
import dayjs from 'dayjs';

const message = useMessage();
const basicModalRef = ref(null);
const formRef = ref(null);
const openType = ref('');
const title = ref('');
const loading = ref(false);
const siteList = ref([]);
const defaultFormItem = {
  status: 't',
  type: 'formal',
};
const formItem = ref({ ...defaultFormItem });
const rules = {
  name: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
  charge: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
  account: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
  password: {
    required: true,
    message: '请输入',
    trigger: ['blur', 'change'],
  },
  site_id: {
    required: true,
    type: 'number',
    trigger: ['blur', 'change'],
    message: '请选择',
  },
  type: {
    required: true,
    message: '请选择',
    trigger: ['blur', 'change'],
  },
};
const [register, { openModal, closeModal, setSubLoading }] = useModal({
  title: title,
});

function open(data, type) {
  openModal();
  formItem.value = { ...defaultFormItem };
  openType.value = type;
  getSales();
  if (type === 'edit') {
    title.value = '编辑客户';
    formItem.value.id = data.id;
    formItem.value.site_id = data.site_id;
    editInfo(data.id, data.site_id);
  } else {
    title.value = '新增客户';
  }
}

const editInfo = (id, site_id) => {
  loading.value = true;
  siteCustomerInfo({ id, site_id })
    .then((res) => {
      formItem.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
};

const getSales = () => {
  siteSelect().then((res) => {
    siteList.value = res;
  });
};

const emits = defineEmits(['update:list']);

const onOk = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      let params = cloneDeep(formItem.value);
      setSubLoading(true);
      if (openType.value === 'edit') {
        delete params.created_at;
        delete params.expired_at;
        await siteCustomerUpdate(params).finally(() => {
          setSubLoading(false);
        });
        message.success('编辑成功');
      } else {
        await siteCustomerAdd(params).finally(() => {
          setSubLoading(false);
        });
        message.success('新增成功');
      }
      closeModal();
      emits('update:list');
    } else {
      setSubLoading(false);
    }
  });
};

defineExpose({
  open,
});
</script>

<style scoped lang="less">

</style>
